<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            font-size: 100px;
        }
    </style>
</head>
<div id="app"></div>

<body>
    <!-- runtime-dom 「是浏览器」-- >  runtime-core 「跨平台」 -- > reactive 「响应式」
    <!-- runtime-dom 他的作用就是提供 dom api （提供一系列操作api的方法） -->
    <script type="module">
        // createRenderer 创建渲染器
        // render 渲染 {内置的渲染器，进行渲染，渲染到dom上}
        // h 创建虚拟dom {type, props, children} (用对象来描述dom结构)
        import { createRenderer, render, h } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
        import { renderOptions } from "./runtime-dom.js"

        const vnode = h('div', {
            class: 'container',
            onClick: () => alert('Clicked!'),
            style: {
                color: 'red'
            },
            a: 11
        }, 'Click me')



        const renderer = createRenderer(renderOptions)

        renderer.render(vnode, app)

        // render(vnode, app)

        // const renderer = createRenderer({
        //     // 创建元素的方法  render会调用createElement方法创建元素
        //     // 并且传入type 也就是标签名 h函数传入的第一个参数
        //     createElement(type) {
        //         console.log(type);
        //         // 创建元素
        //         return document.createElement(type)
        //     },


        //     // 设置元素的文本内容
        //     setElementText(el, text) {
        //         el.textContent = text
        //     },

        //     // 插入元素
        //     insert(el, parent) {
        //         parent.appendChild(el)
        //     }

        // })
    </script>
</body>

</html>